<template>
  <div>
    <h3 class="title">{{ cityname }}现存确诊病例</h3>
    <div id="main" :style="{ width: '7.5rem', height: '7rem' }"></div>
  </div>
</template>

<script>
import api from "@/api/index.js";
export default {
  name: "City",
  props: ["cityname"],
  data() {
    return {
      confirm: "",
      curConfirm: "",
    };
  },
  mounted() {
    api.getCityData(this.cityname).then(({ data: res }) => {
      if (res.codeid !== 10000) return console.log("数据获取失败");
      let now = [];
      for (const item of res.retdata.subList) {
        let obj = {};
        obj.name =
          item.city.includes("市") ||
          item.city.includes("区") ||
          item.city.includes("旗") ||
          item.city.includes("盟") ||
          item.city.includes("州") ||
          item.city.includes("外来") ||
          item.city.includes("外地") ||
          item.city.includes("境外") ||
          item.city.includes("确认")
            ? item.city
            : item.city + "市";
        obj.value = item.curConfirm;
        now.push(obj);
      }
      console.log(now);
      this.$nextTick(() => {
        //这是现存地图
        this.$myChart.cityMap("main", this.cityname, now);
      });
    });
  },
};
</script>

<style lang="less" scoped>
.title {
  border-left: 0.1rem solid #4169e2;
  padding: 0.08rem 0.1rem;
  margin-left: 0.2rem;
  font-size: 0.34rem;
}
</style>